<template>
  <div >
    <div>
    <!--下拉框分类首页搜索-->
      <el-autocomplete
          debounce="0"
          class="inline-input"
          v-model="value1"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
      ><el-button slot="append" icon="el-icon-search" @click="Paasas"></el-button></el-autocomplete>
      <div>
    <el-input placeholder="请输入内容" v-model.number="searchId" class="input-with-select">
      <el-button slot="append" icon="el-icon-search" @click="searchById"></el-button>
    </el-input>
      </div>
    <el-table
        :data="bookList"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="编号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="bookName"
          label="书名"
          width="180">
      </el-table-column>
      <el-table-column  label="预览">
        <template slot-scope="scope">
          <el-image style="width: 30px; height: 30px" :src="scope.row.bookImg" :preview-src-list="[scope.row.book_img]">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
          prop="bookPrice"
          label="价格">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
<router-link to="/setting">设置</router-link>
<router-link to="/index">首页</router-link>
<router-link to="/bookDetail">商品详情页</router-link><br>
    <router-link to="/fluid">轮播图</router-link><br>
    <router-link to="/test">分享测试</router-link><br>
      <router-link to="/hot">书城测试</router-link><br>
    </div>
  </div>

</template>

<script>

import axios from "axios";

export default {
  name: "Book",
  data(){
    return{
      options: [],
      bookTypeList:[],
      bookList:[],
      BookList:[],
      searchId:'', //根据id搜索图书
      //模拟图书类型
      value: [],
      value1: '',
      form:''
    }
  },
  methods:{
    querySearch(queryString, cb) {
      if (queryString===''){
        this.value1=null
      }
        // 调用 callback 返回建议列表的数据
      axios.get('http://localhost:8080/book/searchAll/',{params:{
        Name:this.value1,
      }}
      ).then(Response => {
        this.bookList = Response.data.data.bookList;
        let arr = [];
        for (let i=0;i<this.bookList.length;i++) {
          arr.push(this.bookList[i].bookname);
        }
        let set = new Set(arr);
        let newArr = Array.from(set);
        let arr1=[];
        for (let i=0;i<newArr.length;i++){
          let obj = {};
          obj.value = newArr[i];
          arr1.push(obj);
        }
        this.BookList = arr1;
        cb(this.BookList);
      }).catch((error) => {
        console.log(error);
      });
      },
    handleSelect(item) {
        console.log(item);
    },
    Paasas(){
      if (this.value1===''){
        this.value1=null
      }
      this.axios({
        method:"get",
        url:"http://localhost:8080/book/searchAll/" + this.value1 + "" ,
        // url:"http://localhost:8080/book/list",
        // data:{
        //   "NameAndType": this.value,
        // },
      })
          .then((response) => {
            console.log(response);
            this.bookList = response.data.data.bookList;
          })
          .catch((error) => {
            console.log(error);
          });
    },
    searchById(){
      this.axios({
        method:"get",
        url:"http://localhost:8080/book/list/" + this.searchId + "" ,
        // url:"http://localhost:8080/book/list",
        // data:{
        //   "id": this.searchId,
        // },

      })
        .then((response) => {
          console.log(response);
          this.bookList = response.data.data.bookList;
        })
        .catch((error) => {
          console.log(error);
        });
    }
  },
  mounted() {
    var _this=this
    _this.userId=JSON.parse(sessionStorage.getItem("userId"));
    this.axios.get('http://localhost:8080/user/userownbook',{params:{
      userId:_this.userId,
    }}
  ).then(
        Response => {
          console.log(Response)
          this.bookList = Response.data.data.bookList;
        },
        error => {
        }
    )
  },
  // created() {
  //   this.axios.get('http://localhost:8080/user/userownbook',this.userId).then(
  //       Response => {
  //         console.log(Response)
  //         this.bookList = Response.data.data.bookList;
  //       },
  //       error => {
  //       }
  //   )
  // }
}
</script>

<style scoped>

</style>
